<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Circular Motion</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const cx = canvas.width / 2;
        const cy = 160;
        const R = 100;
        const theta = Math.PI / 4.5; // Angle approx. 40 degrees
        const ballRadius = 5;

        // General drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw the ground line
        const groundY = cy + R + 50;
        ctx.beginPath();
        ctx.moveTo(50, groundY);
        ctx.lineTo(canvas.width - 50, groundY);
        ctx.stroke();

        // 2. Draw the block (M)
        const blockBottomY = groundY - 10;
        // Left vertical side
        ctx.beginPath();
        ctx.moveTo(cx - R, cy);
        ctx.lineTo(cx - R, blockBottomY);
        ctx.stroke();
        // Right vertical side
        ctx.beginPath();
        ctx.moveTo(cx + R, cy);
        ctx.lineTo(cx + R, blockBottomY);
        ctx.stroke();
        // Semi-circular groove (arc goes from 0 to PI for a U-shape)
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, Math.PI);
        ctx.stroke();

        // 3. Draw dashed lines and angle indicators
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1.5;

        // Horizontal dashed line across the top of the groove
        ctx.beginPath();
        ctx.moveTo(cx - R, cy);
        ctx.lineTo(cx + R, cy);
        ctx.stroke();

        // Vertical dashed line for radius R
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx, cy + R);
        ctx.stroke();

        // Position of ball M on the arc
        // Angle from x-axis (alpha) = PI/2 - theta (where theta is from vertical)
        const alpha = Math.PI / 2 - theta;
        const Mx = cx + R * Math.cos(alpha);
        const My = cy + R * Math.sin(alpha);

        // Slanted dashed line to ball M
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(Mx, My);
        ctx.stroke();

        // Angle arc for theta
        const arcRadius = R * 0.3;
        ctx.beginPath();
        ctx.arc(cx, cy, arcRadius, alpha, Math.PI / 2);
        ctx.stroke();

        ctx.restore(); // Restore to solid lines

        // 4. Draw the balls
        // Ball 'm' at the top right edge
        ctx.beginPath();
        ctx.arc(cx + R, cy, ballRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Ball at position 'M'
        ctx.beginPath();
        ctx.arc(Mx, My, ballRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 5. Draw labels
        ctx.fillStyle = 'black';
        ctx.textAlign = 'left';
        
        // Label 'm'
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('m', cx + R + 10, cy);

        // Label 'M'
        ctx.fillText('M', Mx + 5, My + 25);

        // Label 'R'
        ctx.fillText('R', cx - 30, cy + R / 2);

        // Label 'θ' (theta)
        // Positioned manually for better look
        ctx.fillText('θ', cx + 15, cy + 35);

        // Diagram caption
        ctx.font = '20px SimSun';
        ctx.textAlign = 'center';
        ctx.fillText('力图 3.19.1', cx, groundY + 40);

    </script>
</body>
</html>